<template>
  <div>
    <pageHeader title="类目管理"></pageHeader>
    <pageMain>
      <el-table
        :data="shoppingTypeList"
        v-loading="pageLoading"
        default-expand-all
      >
        <el-table-column prop="id" label="ID" width="60"> </el-table-column>
        <el-table-column prop="parent" label="PID" width="60"> </el-table-column>
        <el-table-column prop="name" label="名称" width="200">
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间">
          <template slot="header">
            <div class="tableHeader">
              <span>addTime</span>
            </div>
          </template>

          <template slot-scope="data">
            <div class="tableHeader">
              <span>{{ data.row.addTime | turnTime }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="80">
          <template slot="header">
            <div class="tableHeader">
              <span>Status</span>
            </div>
          </template>
          <template slot-scope="data">
            <div class="tableHeader">
              <span>
                <el-tag
                  effect="plain"
                  size="small"
                  :type="data.row.status ? '' : 'danger'"
                >
                  {{ data.row.status ? "正常" : "关闭" }}
                </el-tag>
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="操作" width="140">
          <template slot="header">
            <div class="tableHeader">
              <span>操作</span>
            </div>
          </template>

          <template slot-scope="scope">
            <div
              class="tableHeader flex unified-flex-space-between unified-flex-align"
            >
              <div
                class="tableHeader flex unified-flex-space-between unified-flex-align"
              >
                <el-button
                  type="primary"
                  size="mini"
                  @click="clickEdit(scope.$index)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="remove(scope.$index)"
                  >删除</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </pageMain>
  </div>
</template>

<script>
import pageMain from "~/page-main/page-main.vue";
import ShoppingAPI from "@/api/shopping";
import pageHeader from "~/page-header/page-header.vue";
export default {
  components: {
    pageHeader,
    pageMain,
  },
  data() {
    return {
      shoppingTypeList: [],
    };
  },

  created() {
    this.getShoppingTypeList();
  },

  methods: {
    // 获取商品类目
    getShoppingTypeList() {
      ShoppingAPI.shoppingTypeList()
        .then((res) => {
          let data = res.data;
          console.log(data);
          this.shoppingTypeList = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped="scoped">
.form {
  padding: 0px 0px;
  width: 60%;
  margin: 0 auto;
}

.addForm {
  width: 80%;
  position: absolute;
  height: 420px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0px 0px 10px 2px #2c3e50;
  overflow: auto;
}

.table {
  padding: 10px 20px;
  padding-bottom: 0px;
  /* border-radius: 10px; */
  box-sizing: border-box;
  background-color: #0081ff;
}

.add-type {
  width: 100%;
  height: 70px;
  /* margin-bottom: 10px; */
  background-color: #fff;
  /* border-radius: 10px; */
  padding: 0px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
